<div apes-form [formGroup]="form">

  <div apes-row [apesGutter]="8">
    <div apes-col [apesMd]="rowSelection == 'single'? 24: 18">
      <div apes-form-item apes-row [apesGutter]="8" class="mb-md">
        <formly-form [model]="model" [fields]="showConditionField" [options]="options" [form]="form"></formly-form>
      </div>
      <div *ngIf="treeData==true && !pureSearch" style="padding:16px;">
        <input apes-input type="search"
               style="width:100%"
               formControlName="quickSearchInput"
               id="filter-text-box"
               placeholder="本地快速查找..."
               (input)="onFilterTextBoxChanged()"
               (keyup)="onFilterTextBoxChanged()"
               (click)="onFilterTextBoxChanged()">
      </div>
      <div class="mb-md" apes-row *ngIf="!pureSearch">
        <div apes-col [apesSpan]="24" class="text-left" style="display: flex;">
          <button apes-button [apesLoading]="searchLoading" [disabled]="searchLoading" apesType="primary"
                  (click)="_search()"
                  class="{{prefixCls}}-btn {{prefixCls}}-primary">查询
          </button>
          <button apes-button (click)="resetForm()" class="mx-sm {{prefixCls}}-btn {{prefixCls}}-default">重置</button>
          <div *ngIf="btnRemarks != ''" style="color: red;padding: 3px 10px;margin-left: 25px;">{{btnRemarks}}</div>
        </div>
      </div>

      <div apes-row [apesGutter]="8">
        <div apes-col class="apes-dialog" [apesSpan]="filterType ? 5 : 0" style="overflow: auto;
    height: 370px;">
          <formly-form [model]="model" [fields]="filterConditionField" [options]="options" [form]="form"></formly-form>
        </div>
        <!-- 高度330px 用于解决无限行导致的多次查询 -->
        <div apes-col [apesSpan]="filterType ? 19 : 24">
          <ag-grid-angular
            *ngIf="!pureSearch"
            style="width: 100%; height: 330px;  margin-bottom: 10px;" class="ag-theme-balham"
            enableColResize="true"
            enableSorting="false"
            enableFilter="false"
            suppressNoRowsOverlay="true"
            [suppressContextMenu]="true"
            [rowData]="rowData"
            [modules]="modules"
            [frameworkComponents]="frameworkComponents"
            [loadingOverlayComponent]="loadingOverlayComponent"
            [gridOptions]="gridOptions"
            [columnDefs]="columnDefs"
            [rowSelection]="rowSelection"
            [treeData]="treeData"
            [autoGroupColumnDef]="autoGroupColumnDef"
            [rowModelType]="rowModelType"
            [context]="ctx"
            [suppressRowClickSelection]="suppressRowClickSelection"
            [getDataPath]="getDataPath"
            (rowClicked)="onRowClicked()"
            (rowDoubleClicked)="onRowDoubleClick()"
            (selectionChanged)="onSelectionChanged()"
            (gridReady)="onGridReady($event)">
          </ag-grid-angular>
        </div>
      </div>

      <div *ngIf="treeData!==true && rowModelType == 'clientSide' && !pureSearch" class="apes-paging">
        <apes-pagination [(apesPageIndex)]="pagination.currentPage" [apesTotal]="total" [apesSize]="'small'"
                         [apesPageSize]="pageSize"
                         [apesShowSizeChanger]="showSizeChanger"
                         [apesPageSizeOptions]="pageSizeOptions"
                         (apesPageIndexChange)="onPageIndexChange()"
                         (apesPageSizeChange)="onPageSizeChange($event)"
                         [apesShowTotal]="totalTemplate"></apes-pagination>
        <ng-template #totalTemplate let-total>
          &nbsp;{{pageSize * (pagination.currentPage == 0 ? 1 : pagination.currentPage) - pageSize + 1}}
          ~ {{pageSize * (pagination.currentPage == 0 ? 1 : pagination.currentPage)}} - {{pageSize}}条/页 - 共 {{total}} 条
        </ng-template>
      </div>
      <div *ngIf="treeData!==true && !pureSearch && !checkboxSelect" class="apes-paging">
        已加载{{loadingTotal}}行，总行数{{total}}
      </div>

    </div>

    <div apes-col
         *ngIf="rowSelection !== 'single' && !pureSearch"
         [apesMd]="6"
         style="height: 500px;overflow: auto;">
      <apes-list
        [apesBordered]="true"
        [apesSize]="'small'"
        [apesHeader]="header">
        <ng-template #header><span>已{{title}}({{resultsData.length}})</span></ng-template>
        <apes-list-item *ngFor="let item of resultsData; let i = index;"
                        [apesActions]="[opAction]"
                        style="display: flex;justify-content: space-between">
          <!--{{item.showField}}-->
          {{formatter(item, getValueFormatter())}}
          <ng-template #opAction><span (click)="clearResultsData(i)">删除</span></ng-template>
        </apes-list-item>
      </apes-list>
    </div>

  </div>

</div>
